<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 80px;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e5e5;
            z-index: 100;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-6">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" 
                     alt="头像" class="w-12 h-12 rounded-full border-2 border-white mr-3">
                <div>
                    <div class="font-semibold text-lg">张工</div>
                    <div class="text-blue-100 text-sm">消防工程A项目 · 项目经理</div>
                </div>
            </div>
            <a href="notifications.html" class="relative">
                <i class="fas fa-bell text-2xl"></i>
                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
            </a>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-bolt text-yellow-500 mr-2"></i>
            快捷功能
        </div>
        <div class="grid grid-cols-6 gap-3">
            <a href="attendance.html" class="flex flex-col items-center">
                <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mb-2">
                    <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
                </div>
                <span class="text-xs text-gray-600">考勤打卡</span>
            </a>
            <a href="leave-apply.html" class="flex flex-col items-center">
                <div class="bg-pink-100 rounded-full w-12 h-12 flex items-center justify-center mb-2">
                    <i class="fas fa-calendar-times text-pink-600 text-xl"></i>
                </div>
                <span class="text-xs text-gray-600">请假申请</span>
            </a>
            <a href="material-apply.html" class="flex flex-col items-center">
                <div class="bg-green-100 rounded-full w-12 h-12 flex items-center justify-center mb-2">
                    <i class="fas fa-box text-green-600 text-xl"></i>
                </div>
                <span class="text-xs text-gray-600">材料申领</span>
            </a>
            <a href="purchase-apply.html" class="flex flex-col items-center">
                <div class="bg-orange-100 rounded-full w-12 h-12 flex items-center justify-center mb-2">
                    <i class="fas fa-shopping-cart text-orange-600 text-xl"></i>
                </div>
                <span class="text-xs text-gray-600">采购申请</span>
            </a>
            <a href="payment-apply.html" class="flex flex-col items-center">
                <div class="bg-purple-100 rounded-full w-12 h-12 flex items-center justify-center mb-2">
                    <i class="fas fa-money-bill-wave text-purple-600 text-xl"></i>
                </div>
                <span class="text-xs text-gray-600">付款申请</span>
            </a>
            <a href="vehicle-apply.html" class="flex flex-col items-center">
                <div class="bg-red-100 rounded-full w-12 h-12 flex items-center justify-center mb-2">
                    <i class="fas fa-car text-red-600 text-xl"></i>
                </div>
                <span class="text-xs text-gray-600">用车申请</span>
            </a>
        </div>
    </div>

    <!-- Pending Tasks -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="flex items-center justify-between mb-4">
            <div class="text-gray-700 font-semibold flex items-center">
                <i class="fas fa-tasks text-blue-500 mr-2"></i>
                待办事项
            </div>
            <a href="approval.html" class="text-blue-600 text-sm">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
        </div>
        <div class="space-y-3">
            <div class="border-l-4 border-orange-500 bg-orange-50 p-3 rounded-r-lg">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="font-semibold text-gray-800 text-sm">采购申请审批</div>
                        <div class="text-xs text-gray-500 mt-1">消防材料采购 · 王工发起</div>
                        <div class="text-xs text-gray-400 mt-1">2小时前 · 紧急</div>
                    </div>
                    <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">待审批</span>
                </div>
            </div>
            <div class="border-l-4 border-blue-500 bg-blue-50 p-3 rounded-r-lg">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="font-semibold text-gray-800 text-sm">付款申请审批</div>
                        <div class="text-xs text-gray-500 mt-1">供应商付款 · 李工发起</div>
                        <div class="text-xs text-gray-400 mt-1">5小时前</div>
                    </div>
                    <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">待审批</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Project Updates -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4 mb-6">
        <div class="flex items-center justify-between mb-4">
            <div class="text-gray-700 font-semibold flex items-center">
                <i class="fas fa-building text-green-500 mr-2"></i>
                项目动态
            </div>
            <a href="#" class="text-blue-600 text-sm">更多 <i class="fas fa-chevron-right text-xs"></i></a>
        </div>
        <div class="space-y-3">
            <div class="flex items-start">
                <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=100&h=100&fit=crop" 
                     alt="项目" class="w-16 h-16 rounded-lg mr-3">
                <div class="flex-1">
                    <div class="font-semibold text-gray-800 text-sm">消防工程A项目</div>
                    <div class="text-xs text-gray-500 mt-1">进度更新：已完成60% · 今日新增3人打卡</div>
                    <div class="text-xs text-gray-400 mt-1">1小时前</div>
                </div>
            </div>
            <div class="flex items-start">
                <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=100&h=100&fit=crop" 
                     alt="项目" class="w-16 h-16 rounded-lg mr-3">
                <div class="flex-1">
                    <div class="font-semibold text-gray-800 text-sm">消防工程B项目</div>
                    <div class="text-xs text-gray-500 mt-1">材料已到货，请及时确认入库</div>
                    <div class="text-xs text-gray-400 mt-1">3小时前</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <div class="flex justify-around py-2">
            <a href="home.html" class="flex flex-col items-center py-2 px-4 text-blue-600">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="approval.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-clipboard-check text-xl mb-1"></i>
                <span class="text-xs">审批</span>
            </a>
            <a href="attendance-stats.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-chart-bar text-xl mb-1"></i>
                <span class="text-xs">统计</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>
</body>
</html>

